<template>
	<view>
		<button class="share-button" @click="handleShare">生成访客预约链接</button>
		<span v-for="item,index in fang" :key="index">{{ item }}</span>
		<!-- <image src="../../../static/mipmap-xxxhdpi/icon_share_qq.png" mode=""></image> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeUnmount
	} from 'vue';
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	import {
		visitor
	} from "@/utils/file.js";

	const fang = ref([]); // 使用 ref 创建响应式的数组

	// 请求访客预约数据
	visitor(uni.getStorageSync("token")).then(res => {
		console.log(res, "访客预约");
		fang.value.push(res.data);
	});

	const shareInstance = new UniShare();

	// 取消分享
	onBeforeUnmount(() => {
		shareInstance.hide();
	});
	// 定义分享函数
	const handleShare = () => {
		if (fang.value.length > 0) {
			const shareData = fang.value[0];
			shareInstance.show({
					content: {
						title: "访客预约",
						href: shareData,
						
					},
					menus: [{
							img: '@/static/app-plus/sharemenu/wechatfriend.png',
							text: '微信好友',
							share: {
								provider: 'weixin',
								scene: 'WXSceneSession',
							},
						},
						{
							imageUrl: '@/static/mipmap-xxxhdpi/icon_share_qq.png',
							text: 'QQ',
							share: {
								provider: 'qq',
							},
						},
						{
							img: '@/static/app-plus/sharemenu/copyurl.png',
							text: '复制',
							share: 'copyurl',
						},
						{
							img: '@/static/app-plus/sharemenu/more.png',
							text: '更多',
							share: 'shareSystem',
						},
					],
					cancelText: '取消分享',
				},
				(e) => {
					console.log(shareInstance.isShow);
					console.log(e);
				}
			);
		}
	};
</script>






<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>